﻿@using Ci.Presentation.Web.Models
@using Newtonsoft.Json;
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Tratamientos";
}

<div class="page-header">
    <h1>@ViewBag.Title <small>Vista general del tratamiento</small></h1>
</div>

@Html.Partial("_Toolbar", new ToolbarVM 
{ 
    Name = "Tratamiento"    
})

<!-- start: PAGE CONTENT -->
<div class="row">
    <!-- Datos Tratamiento -->
    <div class="col-sm-12 col-md-4">
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="icon-external-link-sign"></i>Datos del Tratamiento
                <div class="panel-tools">
                    <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a>
                    <a class="btn btn-xs btn-link panel-refresh" href="#">
                        <i class="icon-refresh"></i>
                    </a>
                    <a class="btn btn-xs btn-link panel-expand" href="#">
                        <i class="icon-resize-full"></i>
                    </a>
                </div>
            </div>

            <div class="panel-body" style="display: block;">
                <div class="space10 toolbar">
                    <a id="btnGuardarTratamiento" class="btn btn-xs btn-primary" role="button">Guardar Tratamiento</a>
                </div>
                <form role="form" class="form-horizontal" style="margin-bottom: 65px;">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="col-sm-6 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Número Tratamiento</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtNumeroTratamiento" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-6 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Fecha</label>
                                </div>
                                <div class="col-sm-12">
                                    <div class="input-group">
                                        <input type="text" id="dtpFecha" data-date-format="dd-mm-yyyy" data-date-viewmode="years" class="form-control date-picker">
                                        <span class="input-group-addon"><i class="icon-calendar"></i></span>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12">
                        <div class="form-group">
                            <div class="col-sm-12 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Tipo de Tratamiento</label>
                                </div>
                                <div class="col-sm-12">
                                    <select id="cboTipoTratamiento" class="form-control search-select">
                                        <option value="">&nbsp;</option>
                                        <option value="1">EXODONCIA</option>
                                        <option value="2">RESTAURACION</option>
                                        <option value="3">CORONA</option>
                                        <option value="4">ENDODONCIA</option>
                                        <option value="5">IMPLANTE</option>
                                        <option value="6">PERNO MUÑON</option>
                                        <option value="7">PRÓTESIS</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12">
                        <div class="space-20"></div>
                        <div class="form-group">
                            <div class="col-sm-12 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Número Sesiones</label>
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" id="txtNumeroSesiones" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <!-- end: TEXT FIELDS PANEL -->
        </div>
    </div>

    <!-- Datos Paciente -->
    <div class="col-sm-12 col-md-8">
        <!-- start: TEXT FIELDS PANEL -->
        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="icon-external-link-sign"></i>
                Datos del Paciente
                <div class="panel-tools">
                    <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a>
                    <a class="btn btn-xs btn-link panel-refresh" href="#">
                        <i class="icon-refresh"></i>
                    </a>
                    <a class="btn btn-xs btn-link panel-expand" href="#">
                        <i class="icon-resize-full"></i>
                    </a>
                </div>
            </div>
            <div class="panel-body" style="display: block; padding: 0px 0px 15px;">
                <div class="space10 toolbar">
                    <a data-toggle="modal" class="btn btn-xs btn-primary" role="button" href="#Paciente">Buscar Paciente
                    </a>
                    <a id="VerTratamientos" data-toggle="modal" class="btn btn-xs btn-default" role="button" href="#ListaTratamientos">Ver Tratamientos
                    </a>
                </div>
                <form role="form" class="form-horizontal">
                    <div class="col-sm-9">
                        <div class="form-group">
                            <div class="col-sm-12 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">
                                        Código
                                    </label>
                                </div>
                                <div class="col-sm-4">
                                    <input type="text" id="txtCodigo" class="form-control" readonly="true">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-4 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">
                                        DNI
                                    </label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtDni" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-8 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Nombres y Apellidos</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtNombresApellidos" class="form-control" readonly="true">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-9 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Dirección</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtDireccion" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">
                                        Teléfono
                                    </label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtTelefono" class="form-control" readonly="true">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Sexo</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtSexo" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">Edad</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtEdad" class="form-control" readonly="true">
                                </div>

                            </div>
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">
                                        Estado Civil
                                    </label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtEstadoCivil" class="form-control" readonly="true">
                                </div>
                            </div>
                            <div class="col-sm-3 no-padding">
                                <div class="col-sm-12">
                                    <label for="form-field-1">País de Origen</label>
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" id="txtPaisOrigen" class="form-control" readonly="true">
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-sm-3">
                        <div class="thumbnail photo">
                            <i class="clip-user-5"></i>
                        </div>
                    </div>
                </form>
            </div>
            <!-- end: TEXT FIELDS PANEL -->
        </div>
    </div>
    <!-- end: PAGE CONTENT-->
</div>

<div class="row">
    <!-- Datos Odontograma -->
    <div class="col-sm-12">
        <div id="ListaTratamientos" class="panel panel-default">
            <div class="panel-heading">
                <i class="icon-external-link-sign"></i>Lista de Tratamientos
                                <div class="panel-tools">
                                    <a class="btn btn-xs btn-link panel-collapse collapses" href="#"></a>
                                    <a class="btn btn-xs btn-link panel-refresh" href="#">
                                        <i class="icon-refresh"></i>
                                    </a>
                                    <a class="btn btn-xs btn-link panel-expand" href="#">
                                        <i class="icon-resize-full"></i>
                                    </a>
                                </div>
            </div>

            <div class="panel-body" style="display: block;">
                <div class="space10 toolbar">
                    <a data-toggle="modal" class="btn btn-xs btn-primary" role="button">Ver Detalle
                    </a>
                </div>

                <div id="ListaTratamientosContainer" class="col-sm-12">
                   
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end: PAGE CONTENT -->

<!-- start: BOOTSTRAP EXTENDED MODALS -->
@Html.Partial("_Paciente")

@Html.Partial("_BuscarTratamiento")
<!-- end: BOOTSTRAP EXTENDED MODALS -->

<script src="~/assets/plugins/jquery/jquery.js"></script>
<script src="~/assets/plugins/kendo/js/kendo.web.min.js"></script>

<script>
    $(document).ready(function () {
        HideSettingsSideBar();
        FormElements.init();

        FichaOdontogramaSettings();

        $('#GuardarConsulta').click(function () {
            var model = {
                'nroConsulta': $('#txtNumeroConsulta').val(),
                'fecha': $('#dtpFecha').val(),
                'motivo': $('#txtMotivoConsulta').val(),
                'sintomas': $('#txtSintomas').val(),
                'observacion': $('#txtObservacion').val()
            };

            debugger;
            $.post('@Url.Action("Save", "Consulta")', JSON.stringify(model))
                .done(function (data) {
                    if (data == true)
                        alert();
                });
        });

        $('#btnBuscar').click(function () {
            $.get('@Url.Action("SearchPaciente", "Paciente")?dni=' + $('#txtSearchDni').val() + '&apePat=' + $('#txtSearchNombres').val(), function (data) {
                $('#ConsultaListResult').empty();
                CreatePacienteGrid(data);
            });
        });

        $('btnGuardarTratamiento').click(function () {
            
        });
    });

    function FichaOdontogramaSettings() {
        $('#ListaTratamientos').hide();

        $('#VerTratamientos').click(function (e) {
            $('#ListaTratamientos').slideToggle();
        });
    }
</script>
